<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Active GitHub Forks</title>

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css" integrity="sha384-zmMNeKbOwzvUmxN8Z/VoYM+i+cwyC14+U9lq4+ZL0Ro7p1GMoh8uq8/HvIBgnh9+" crossorigin="anonymous"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.8.4/css/searchBuilder.bootstrap5.min.css" integrity="sha384-c+17EpI1t/ZAjBoElPoW3nsmP/5974nO3qiFjdyE/JLy0pDYToN1xM+cdrRNTcab" crossorigin="anonymous"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" integrity="sha384-NvKbDTEnL+A8F/AA5Tc5kmMLSJHUO868P+lDtTpJIeQdGYaUIuLr4lVGOEA1OcMy" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha384-5AkRS45j4ukf+JbWAfHL8P4onPA9p0KwwP7pUdjSQA3ss9edbJUJc/XcYAiheSSz" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js" integrity="sha384-n+4gDsCQ+x0o5YCJeYqFY1Yl+qgW41qmMAilIyF/bJwIUeTK00QB845/VijT5pQq" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js" integrity="sha384-G85lmdZCo2WkHaZ8U1ZceHekzKcg37sFrs4St2+u/r2UtfvSDQmQrkMsEx4Cgv/W" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/searchbuilder/1.8.4/js/dataTables.searchBuilder.min.js" integrity="sha384-5huBQ/mfeKyn+hIST/C6o5x4W9VntlvCNZY4usMuWOFB0s8ABLE65hOtXqhB+AKJ" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/searchbuilder/1.8.4/js/searchBuilder.bootstrap5.min.js" integrity="sha384-9eFZ0WfV3F1WYwtSPlJAQyeKYNmJBE5j1YPuzvkMJM+iQFp2AhwUEBDu/TogLL5c" crossorigin="anonymous"></script>
</head>

<body class="bg-body">
    <div class="container pt-4 pb-2">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <div class="card">
                    <header class="card-header text-center">
                        <nav class="h3 mb-0">
                            <a href="https://github.com/techgaun/active-forks" class="text-body-emphasis">
                                <span class="visually-hidden">Source code on GitHub</span>
                                <i class="fa fa-github-alt pull-left" aria-hidden="true"></i>
                            </a>
                        </nav>
                        <h1 class="h3">
                            Active GitHub Forks
                        </h1>
                    </header>

                    <main class="card-body">
                        <search class="mb-3">
                            <form id="form">
                                <label for="q">Find repository (e.g. "techgaun/github-dorks")</label>
                                <div class="input-group">
                                    <input id="q" name="q" class="form-control" type="text" spellcheck="false">
                                    <span class="input-group-btn">
                                        <button id="find" onClick="fetchData()" type="button" class="btn btn-primary">
                                            <i id="spinner" class="fa fa-spinner fa-pulse fa-fw" hidden></i> Find
                                        </button>
                                    </span>
                                </div>
                            </form>
                        </search>

                        <div id="data-body"></div>
                        <table id="forkTable" class="display table table-sm table-striped text-start" width="100%"></table>
                    </main>
                    <button id="dark-mode-toggle" aria-pressed="false">
                        <span class="visually-hidden">Toggle Dark Mode</span>
                        <span aria-hidden="true">🌓</span>
                    </button>
                    <footer id="footer" class="card-footer text-muted"></footer>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>